<template>
    <div class="app-container">
        <el-card shadow="never" style="width:100% ; border:none">
            <div slot="header">
                <span class="search-title">订单详情</span>
                <span class="order-status"
                    ><i class="el-icon-document" style="font-size:20px; margin-right:10px" />{{
                        orderStatus[orderDetail ? orderDetail.status : 'ERROR']
                    }}</span
                >
                <span style="margin-top:-10px; float:right" @click="returnPage"
                    ><el-button>返回</el-button></span
                >
            </div>
            <el-row class="detail-info">
                <el-col :span="8">订单号：{{ orderDetail.id }} </el-col>
                <el-col :span="8">下单时间：{{ orderDetail.createTime }} </el-col>
                <el-col :span="8">支付时间：{{ orderDetail.createTime }} </el-col>
                <el-col :span="8">支付流水号：{{ orderDetail.createTime }} </el-col>
                <el-col :span="8">买家备注：{{ orderDetail.comment }} </el-col>
            </el-row>
        </el-card>
        <el-card shadow="never" style="width:100% ; border:none">
            <div slot="header">
                <span class="search-title">收货信息</span>
            </div>
            <el-row class="detail-info">
                <el-col :span="6">买家名称：{{ orderDetail.receiver }} </el-col>
                <el-col :span="18">买家手机号：{{ orderDetail.receiverMobile }} </el-col>

                <el-col :span="6">社区店名称：{{ orderDetail.communityName }} </el-col>
                <el-col :span="6">团长名称：{{ orderDetail.headName }} </el-col>
                <el-col :span="6">团长电话：{{ orderDetail.headMobile }} </el-col>
                <el-col :span="20">社区店地址：{{ orderDetail.headAddress }} </el-col>
                <el-col :span="20">提货地址：{{ orderDetail.deliveryAddress }} </el-col>
            </el-row>
        </el-card>
        <el-card shadow="never" style="width:100% ; border:none">
            <div slot="header">
                <span class="search-title">订单详情</span>
            </div>
            <el-table :data="orderDetail.orderItemList" style="width: 100%" border>
                <el-table-column prop="goods" label="商品信息" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-row type="flex" justify="center">
                            <el-avatar shape="square" :size="50" :src="scope.row.resourceUrl">
                                <img
                                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                />
                            </el-avatar>
                            <div class="goods-info">
                                <div class="goods-name" :title="scope.row.goodsName">
                                    {{ scope.row.goodsName }}
                                </div>
                            </div>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="计量单位" align="center"> </el-table-column>
                <el-table-column prop="sellPrice" label="单价" align="center"> </el-table-column>
                <el-table-column prop="quantity" label="数量" align="center"> </el-table-column>
                <el-table-column prop="totalAmount" label="应付金额" align="center">
                </el-table-column>
                <el-table-column prop="status" label="订单状态" align="center">
                    <template slot-scope="scope">{{ orderStatus[scope.row.status] }}</template>
                </el-table-column>
                <el-table-column prop="deliveredTime" label="发货时间" align="center">
                    <!-- <template>{{ item.receiver }}</template> -->
                </el-table-column>
                <el-table-column prop="planDeliveryTime" label="提货时间" align="center">
                    <!-- <template> {{ item.communityName }}</template> -->
                </el-table-column>
                <el-table-column prop="postSaleTime" label="售后截止日" align="center">
                </el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="operate(scope.row)"
                            >操作</el-button
                        ></template
                    >
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="center" :gutter="25" class="detail-footer">
                <el-col>
                    订单总金额:
                    <span style="color:red"> {{ formatMoney(orderDetail.totalAmount) }}</span>
                </el-col>
                <el-col>
                    团长预计佣金:
                    <span style="color:red"> {{ formatMoney(orderDetail.totalCommission) }} </span>
                </el-col>
                <el-col> 退款金额 {{ formatMoney(orderDetail.refundAmount) }} </el-col>
                <el-col> 佣金退款 {{ formatMoney(orderDetail.totalCommission) }} </el-col>
            </el-row>
        </el-card>
        <el-card shadow="never" style="width:100% ; border:none">
            <div slot="header">
                <span class="search-title">操作记录</span>
            </div>
            <el-table border :data="orderDetail.operationList" style="width: 100%">
                <el-table-column prop="operator" label="操作人" align="center"> </el-table-column>
                <el-table-column prop="createTime" label="时间" align="center"> </el-table-column>
                <el-table-column prop="detail" label="类型" align="center"> </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getOrderDetail } from '@/api/order';
import { formatMoney } from '@/utils/goods';
export default {
    name: 'detail',

    created() {
        let pathStr = this.$route.path;
        this.orderId = this.$route.params.id;
        this.getDetail();
    },
    data() {
        return {
            orderId: '',
            orderDetail: {},
            orderStatus: {
                WAIT_PAY: '待付款',
                IN_STOCK: '备货中',
                WAIT_TAKEOFF: '待提货',
                SHUTDOWN: '已关闭',
                FINISHED: '已完成',
                ERROR: ''
            }
        };
    },

    methods: {
        getDetail(id) {
            id = id ? id : this.orderId;
            getOrderDetail(id).then(res => {
                if (res.data.success == true) {
                    this.orderDetail = res.data.data;
                } else {
                    this.orderDetial = {};
                    this.$message.error('获取订单信息失败');
                }
            });
        },
        operate(row) {},
        formatMoney(num) {
            return formatMoney(num);
        },
        returnPage() {
            this.$router.back(-1);
        }
    }
};
</script>
<style scoped lang="scss">
.search-title {
    font-size: 18px;
}
.pagination {
    margin: 15px 0;
}
.row-margin {
    margin: 15px 0;
}
.order-status {
    font-size: 18px;
    margin-left: 100px;
}
.search-title {
    font-size: 18px;
    font-weight: bold;
}
.detail-info {
    line-height: 30px;
    vertical-align: middle;
    .el-col {
        margin: 10px 0px;
    }
}
.detail-footer {
    margin-top: 25px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
.goods-name {
    width: 120px;
    // height: 60px;
    text-align: start;
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-top: 5px;
}
</style>
